<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 引入京东网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入自己的样式，内部包含全局样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入阿里巴巴矢量图标 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .wrapper {
            width: 1197px;
            height: 544px;
            margin: 0 auto;
            margin-top: -7px;
        }
    
        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }
    
        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }
    
        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }
    
        .products {
            width: 1200px;
            border: 1px solid #ddd;
            height: 626px;
        }
    
        .products .main {
            float: left;
            display: none;
            width: 100%;
            height: 100%;
        }
    
        .products .main.actives {
            display: block;
        }
    
        .tab li.actives {
            border-color: red;
            border-bottom: 0;
        }

        .main a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .main img{
            width: 100%;
            height: 100%;
        }
        
        .TJNav {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <!-- wrap只做宽度和居中 -->
        <div class="wrap header-box">
            <div class="logo"></div>
            <div class="search">
                <div class="search-m">
                    <!-- 吸顶效果用的小logo -->
                    <div class="search-logo"></div>
                    <!-- 搜索框 -->
                    <div class="form">
                        <!-- placeholder空白框显示文本 -->
                        <input type="text" class="keyword" placeholder="格力变频空调" value="">
                        <span class="camera"><a href="#"><i
                                    class="iconfont icon-zhaoxiangji  camera_photo"></i></a></span>
                        <button><a href="#"><i class="iconfont icon-sousuo"></i></a></button>
                        <div class="search_list"></div>
                    </div>
                    <!-- 我的购物车 -->
                    <div class="shopping">
                        <div class="shopping_btn">
                            <i class="iconfont">&#xe655</i>
                            <a href="#">我的购物车</a>
                            <i class="shopping_number">0</i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hotwords">
                <a href="#">京造特价</a>
                <a href="#">iPhone15</a>
                <a href="#">低至9.9</a>
                <a href="#">京东装修</a>
                <a href="#">5折抢购</a>
                <a href="#">酒水</a>
                <a href="#">兰蔻狂欢</a>
            </div>
            <!-- 标题导航 -->
            <div class="navitems">
                <ul>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">京东生鲜</a></li>
                    <li><a href="#">秒杀</a></li>
                    <li><a href="#">京东家电</a></li>
                    <li><a href="#">电脑数码</a></li>
                    <li><a href="#">PLUS会员</a></li>
                    <li><a href="#">进口好物</a></li>
                    <li><a href="#">便宜包邮</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">京东五金城</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->

    <!-- 内容第一部分开始 -->
    <div class="sectorOne">
        <div class="wrap sectorOne-box">
            <div class="sectorOneLeft">
                <ul class="SOL_nav">
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机 / 运营商 / 数码</a></li>
                    <li><a href="#">电脑 / 办公</a></li>
                    <li><a href="#">家居 / 家具 / 家装 / 厨具</a></li>
                    <li><a href="#">男装 / 女装 / 童装 / 内衣</a></li>
                    <li><a href="#">美妆 / 个护清洁 / 宠物</a></li>
                    <li><a href="#">女鞋 / 箱包 / 钟表 / 珠宝</a></li>
                    <li><a href="#">男鞋 / 运动 / 户外</a></li>
                    <li><a href="#">房产 / 汽车 / 汽车用品</a></li>
                    <li><a href="#">母婴 / 玩具乐器</a></li>
                    <li><a href="#">食品 / 酒类 / 生鲜 / 特产</a></li>
                    <li><a href="#">艺术 / 礼品鲜花 / 农牧园艺</a></li>
                    <li><a href="#">医药保健 / 计生情趣</a></li>
                    <li><a href="#">图书 / 文娱 / 教育 / 电子书</a></li>
                    <li><a href="#">机票 / 酒店 / 旅游 / 生活</a></li>
                    <li><a href="#">支付 / 白条 / 保险 / 企业金融</a></li>
                    <li><a href="#">安装 / 维修 / 清洗 / 二手</a></li>
                    <li><a href="#">工业品 / 元器件</a></li>
                </ul>
            </div>
            <div class="sectorOneCenter">
                <!-- 轮播图开始 -->
                <div class="sectorOneCenterLun">
                    <a href="javascript:;">
                        <img src="./images/CO轮播1.png.webp " class="LB_img">
                    </a>
                    <a href="javascript:;" class="prev iconfont">&#xeb15</a>
                    <a href="javascript:;" class="next iconfont">&#xe775 </a>
                    <ul class="Lun_btn">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <!-- 轮播图结束 -->
                <div class="sectorOneCenterNone">
                    <a href="#">
                        <img src="./images/A1.png.webp" alt="" srcset="">
                    </a>
                    <a href="#">
                        <img src="./images/A2.png.webp" alt="" srcset="">
                    </a>
                    <a href="#">
                        <img src="./images/A3.png.webp" alt="" srcset="">
                    </a>
                </div>
            </div>
            <div class="sectorOneRight">
                <div class="SOR_container">
                    <a href="#"><img src="./images/B1.png" alt=""></a>
                    <h5>Hi~欢迎逛京东</h5>
                    <div>
                        <img src="./images/B2.png" alt="" class="SORC_img">
                        <img src="./images/B3.png" alt="" class="SORC_img">
                    </div>
                </div>
                <div class="SOR_service">
                    <ul class="SORitem">
                        <!-- <li>
                            <img src="./images/B4.png" alt="" srcset="" class="SORitemImg">
                            <p class="SORitemP">企业购</p>
                        </li> -->
                    </ul>
                </div>
                <div class="SOR_new">
                    <span>资讯</span>
                    刘文强：我国工业绿色发展取得七个方面重大成就
                </div>
            </div>
            <div class="picture" >
                <img src="./images/C1.png" alt="" srcset="">
            </div>
            <!-- <div class="bg">
                <a></a>
            </div> -->
        </div>
    </div>
    <!-- 内容第一部分结束 -->

    <!-- 内容第二部分开始 -->
    <div class="sectorTwo">
        <div class="wrap">
            <div class="miaosha item">
                <div class="countdown">
                    <p class="next">12 : 20场距 结束</p>
                    <p class="title">京东秒杀</p>
                    <p class="clock">
                      <span id="hour">00</span>
                      <i>:</i>
                      <span id="minutes">25</span>
                      <i>:</i>
                      <span id="scond">20</span>
                    </p>
                    <p class="tips">
                    </p>
                </div>
                <div class="pingyi">
                    <img src="./images/D2.png" alt="" srcset="">
                </div>
                <div>
                    <img src="./images/D1.png" alt="" srcset="">
                </div>
            </div>
            <div class="haowu item">
                <a href="#"></a>
                <ul class="HWUl">
                    <!-- <li>
                        <img src="./images/E2.webp" alt="" srcset="">
                        <div>
                            <h3>好物低至9.9</h3>
                            <p>粮油调味</p> 
                        </div>
                    </li> -->
                </ul>
            </div>
            <div class="guangchang item">
                <img src="./images/F1.png" alt="" srcset="">
            </div>
            <div class="tuijian item">
                <img src="./images/G1.png" alt="" srcset="" class="TJNav">
                <div class="wrapper">
                    <ul class="tab">
                      <li class="tab-item actives">国际大牌<span>◆</span></li>
                      <li class="tab-item">国妆名牌<span>◆</span></li>
                      <li class="tab-item">清洁用品<span>◆</span></li>
                      <li class="tab-item">男士精品</li>
                    </ul>
                    <div class="products">
                      <div class="main actives">
                        <a href="###"><img src="./images/guojidapai.jpg" alt="" /></a>
                      </div>
                      <div class="main">
                        <a href="###"><img src="./images/guozhuangmingpin.jpg" alt="" /></a>
                      </div>
                      <div class="main">
                        <a href="###"><img src="./images/qingjieyongpin.jpg" alt="" /></a>
                      </div>
                      <div class="main">
                        <a href="###"><img src="./images/nanshijingpin.jpg" alt="" /></a>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
        <!-- 楼层 -->
        <div class="elevator">
            <a href="#">京东<br>秒杀</a>
            <a href="#">双11<br>好物</a>
            <a href="#">频道<br>广场</a>
            <a href="#">为你<br>推荐</a>
        </div>
    </div>
    <!-- 内容第二部分结束 -->

    <!-- 底部开始 -->
    <div class="footer">
        <img src="./images/footer.png" alt="" srcset="">
    </div>
    <!-- 底部结束 -->
    <!-- 引入自己的js文件 -->
    <script src="./js/index.js"></script>
</body>

</html>